<!--加上setup允许在script中直接编写组合式API -->

<!-- 
1.setup选项的执行时机?
beforeCreate钩子之前 自动执行

2.setup写代码的特点是什么?
定义数据+函数 然后以对象方式return

3.<script setup>解决了什么问题?
经过语法糖的封装更简单的使用组合式API

4.setup中的this还指向组件实例吗?
指向undefined 
-->

<!-- 
<script setup>
  export default{
    //setup
    //1.执行时机，比beforecreate还要早
    //2.setup函数中，获取不到this(this是undefined)
    //3.数据 和 函数，需要在 setup 最后 return，才能模板中应用
    setup(){
      console.log('setup函数');
      const message='hello'

      const logMessage= ()=>{
        console.log(message);
      }
    },
    beforeCreate(){
      console.log('beforeCreate函数');
    }
  }
</script> 
-->


<script setup>
    const message='hello_message'
    console.log(message);
    
    const logMessage = ()=>{
      console.log(message);
    }
</script>

<template>
  <header>
    <button @click="logMessage()">按钮{{ message }}</button>
  </header>
</template>

<style scoped>
</style>
